<template>
  <div class="home">
    <header></header>
    <main></main>
    <footer>
      <!-- <van-tabbar v-model="active"> -->
        <div v-model="active">
          <div>
            <van-icon name="home-o" size="21px"/>
            <span>推荐</span>
          </div>
          <div>
            <van-icon name="orders-o" size="18px"/>
            <span>演出</span>
          </div>
          <div>
            <van-icon name="browsing-history-o" size="18px"/>
            <span>发现</span>
          </div>
          <div>
            <van-icon name="contact" size="18px"/>
            <span>我的</span>
          </div>
        </div>
    </footer>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);

export default {
  // components:{

  // }
}
</script>
<style lang='stylus' scoped>
@import '~@/assets/stylus/border.styl';
.home
  height 100%
  display flex
  flex-direction column
  header
    height .44rem
  main
    flex 1
  footer
    padding-top .04rem
    border_1px(1px 0 0 0)
    height .44rem  
    div
      display flex
      justify-content space-around
      align-items center
      div 
        display flex
        flex-direction column
        align-items center
        justify-content center
        van-icon
          margin-top .04rem
        span 
          font-size .12rem
          margin-top .02rem
          margin-bottom .02rem


</style>